<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			/* 练习：1.圆形 2.正三角形
			 思路1：宽高与边框倒角一致
			 
			 */
			div#cirle{
			    width: 400px;
				height: 400px;
				border: 1px solid red;
				border-radius: 50%;
				/* 边框阴影：box-shadow 属性 */
				box-shadow: 5px 5px 50px 50px red inset;
			}
			/* 思路2：div#triangle  
			                css中：抓到div   【斜线】
			                      左边框：50像素实线红色
			                      右边框：50像素实线黄色
								  下边框：50像素实线黑色
					注意：先别加宽高 tansparent 透明色 */
			div#triangle{
				   width: 0; 
				border-left: 50px solid transparent;
			    border-right: 50px solid transparent;
				border-bottom: 50px solid black; 
				
				
				/* 两行：倒三角 蓝色 透明度 .3 
				  提醒：所有边框： 50px solid transparent
				        上边框颜色改成蓝色 0，0，255*/
				/* width: 0;
				border: 50px solid transparent;
				border-top-color: rgba(0,0,255,.3);  
			} */
			/* outline 边框轮廓 只针对input元素  */
			input{
				outline: 1px solid red;
				
			}
			/* 实际应用：通配选择器 去掉轮廓
			    { outline 0;}
				*/
		</style>
	</head>
	<body>
		<div id="cirle"></div>
		<div id="triangle"></div>
		边框：<input type="text" />
	</body>
</html>